<template>
  <a-card :bordered="false">
    <a-tabs defaultActiveKey="1">
      <!-- 柱状图 -->
      <a-tab-pane tab="图表总览" key="1">
        <bar title="测试" :dataSource="barData" :height="height" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import Bar from "@/components/chart/Bar";
export default {
  name: "ViserChartDemo",
  components: {
    Bar,
  },
  data() {
    return {
      height: 420,
      barData: [],
    };
  },
  created() {
    setTimeout(() => {
      this.loadBarData();
    }, 100);
  },
  methods: {
    loadData(x, y, max, min, before = "", after = "月") {
      let data = [];
      for (let i = 0; i < 12; i += 1) {
        data.push({
          [x]: `${before}${i + 1}${after}`,
          [y]: Math.floor(Math.random() * max) + min,
        });
      }
      return data;
    },
    // 加载柱状图数据
    loadBarData() {
      this.barData = this.loadData("x", "y", 1000, 200);
    },
  },
};
</script>

<style scoped></style>
